<template>
  <div>
    <!-- 图片上传组件辅助-->


    <el-upload class="avatar-uploader" :action="serverUrl" name="img"  :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload">
    </el-upload>
    <!--富文本编辑器组件-->
    <el-row v-loading="uillUpdateImg">
      <quill-editor v-model="detailContent" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)" @ready="onEditorReady($event)">
      </quill-editor>
    </el-row>
  </div>
</template>
<script>
// import { quillEditor } from 'vue-quill-editor'
  import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor'
export default {
  name: 'test',
  components: { quillEditor },
  // props: ['text', 'editorId'],
  data() {
    return {
      imageUrl: '',
      uillUpdateImg:'',
      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
      serverUrl: '', // 这里写你要上传的图片服务器地址
      // header: { token: sessionStorage.token }, // 有的图片服务器要求请求头需要有token之类的参数，写在这里
      detailContent: '', // 富文本内容
      editorOption: {
        placeholder: '',
        // theme: 'snow', // or 'bubble'
        modules: {
           toolbar: [
              [{ 'size': ['small' ,'large', 'huge'] }],
              ['bold', 'italic', 'underline'],
              ['blockquote'],
              [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
              [{ 'font': [] }],
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],['image']
            ],
            handlers:{
              'image':function(vla){
                if(val){
                  document.querySelector('.avatar-uploader input').click()
                }else{
                  this.quill.format('image', false);
                }
              }
            }
        //     ,
        //   handlers: {
        //     'image': function (value) {
        //      if (value) {
        //      // 触发input框选择图片文件
        //         document.querySelector('.avatar-uploader input').click()
        //        } else {
        //         this.quill.format('image', false);
        //       }
        //    }
        // }
      }
    }
  }
},
mounted() {
  // this.$refs.myQuillEditor.quill.getModule("toolbar").addHandler("image", imgHandler)
},
computed: {
         
},
methods: {
  onEditorReady(){},
  handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
  beforeUpload() {
                // 显示loading动画
                this.quillUpdateImg = true
            },
            
            uploadSuccess(res, file) {
                // res为图片服务器返回的数据
                // 获取富文本组件实例
                let quill = this.$refs.myQuillEditor.quill
                // 如果上传成功
                if (res.code === '200' && res.info !== null) {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片  res.info为服务器返回的图片地址
                    quill.insertEmbed(length, 'image', res.info)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    this.$message.error('图片插入失败')
                }
                // loading动画消失
                this.quillUpdateImg = false
            },
       
            // 富文本图片上传失败
            uploadError() {
                // loading动画消失
                this.quillUpdateImg = false
                this.$message.error('图片插入失败')
            }
}
}

</script>

<style scoped>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
